<template>
	<view class="introduce">
		<view class="content">
			<view class="title">修改个人介绍</view>
			<view class="maxlength">使用简短的一句话介绍一下自己吧。介绍最多200个字。</view>
			<textarea v-model="textareaVal" placeholder-style="color:#CACCCC" maxlength="200"  class="inputBox" placeholder="请输入个人介绍" />
		</view>
		<view class="btn" @click="edit">确认修改</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import api from '@/api'
	import {  ref  } from 'vue'
	import { useUserStoreToRefs } from '@/store/useUserStore'
	const { userInfo } = useUserStoreToRefs()
	onLoad(() => {
		textareaVal.value = userInfo.value.petsitterIntroduce
	})
	const textareaVal = ref('')
	const edit = async() => {
		if (textareaVal.value == '' || !textareaVal.value) {
			uni.showToast({
				title: '请填写个人介绍',
				icon: 'none'
			});
			return false
		}
		if (textareaVal.value.length > 200) {
			uni.showToast({
				title: '介绍最多200个字',
				icon: 'none'
			});
			return false
		}
		let res:any = await api({
		  method: 'put',
		  url: `/mall/user/updateIntroduce`,
		  data:{
			  petsitterIntroduce:textareaVal.value
		  }
		})
		if (res.code !== 0) {
			uni.showToast({
				icon: 'none',
				mask: true,
				title: res.msg
			})
			return false
		}else{
			uni.showToast({
				icon: 'none',
				mask: true,
				title: '修改成功'
			})
			setTimeout(() => {
				uni.navigateBack()
			},1000)
		}
	}
</script>

<style lang="scss" scoped>
.introduce{
	height: 100vh;
	background-color: #F9F6F6;
	padding: 32rpx;
	box-sizing: border-box;
	.content{
		padding: 40rpx 32rpx;
		box-sizing: border-box;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background-color: #fff;
		.title{
			font-weight: bold;
			color: #1A1A1A;
			font-size: 32rpx;
		}
		.maxlength{
			color: #7C807F;
			font-size: 28rpx;
			margin: 16rpx 0 40rpx;
			line-height: 40rpx;
		}
		.inputBox{
			background: #F9F6F6;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			height: 506rpx;
			padding: 32rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #1B2120;
			width: 100%;
		}
	}
	.btn{
		background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
		border-radius: 62rpx 62rpx 62rpx 62rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #fff;
		letter-spacing: 2rpx;
		margin-top: 24rpx;
	}
}	
</style>